<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>

			div,span{
				color: red;
			}
		</style>
	</head>
	<body>
		服务器消息(同步)：<br>
		<button type="button" onclick="fun()">获取消息</button>
		<br>
		获得的消息：<span></span>
		<script type="text/javascript">
			function fun(){
				//1.初始化对象
				var xhr=new XMLHttpRequest();
				//2.创建请求
				xhr.open("GET","data.txt",false);//false->同步请求
				//3.发送请求
				xhr.send();
				//4.处理响应
				var txt=xhr.responseText;
				document.querySelectorAll("span")[0].innerHTML=txt;//直接通过标签选中span，添加i，class
			}
		</script>
		<hr>
		<br>
		
		服务器消息(异步)：<br>
		<button type="button" onclick="fun2()">获取消息</button>
		<br>
			获得的消息：<span></span>
		<script type="text/javascript">
			function fun2(){
				//1.初始化对象
				var xhr=new XMLHttpRequest();
				//2.创建请求
				xhr.open("GET","data.txt",true);//true->异步请求
				//3.发送请求
				xhr.send();
				//4.处理响应
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){//请求完成并且服务器正常,p327
						var txt=xhr.responseText;
						document.querySelectorAll("span")[1].innerHTML=txt;//直接通过标签选中div，添加i，class
					}
				}
				
			
			}
		</script>
	</body>
</html>
